<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>数字黔游 - 登录</title>
    <link rel="stylesheet" href="css/vuesax.css">
    <link rel="stylesheet" href="js/iview-3.1.3/styles/iview.css">
    <style>
        html, body {
            height: 100%;
        }

        #form {
            background-color: rgba(13, 39, 76, 0.5);
            border: 1px #487396 solid;
            width: 20rem;
            height: 50vh;
            position: absolute;
            top: 16vh;
            right: 17%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            z-index: 999;
        }

        #form > span {
            font-weight: 700;
            font-style: normal;
            font-size: 26px;
            color: #0079FE;
        }

        .vs-con-input-label {
            width: unset;
        }

        .vs-con-input-label .vs-con-input .vs-inputx {
            border-radius: 0;
        }

        .dirty input {
            border-color: #5A5;
            background: #EFE;
        }

        .dirty:focus input {
            outline-color: #8E8;
        }

        .error input {
            border-color: red;
            background: #FDD;
        }

        .error:focus input {
            outline-color: #F99;
        }

        footer {
            position: absolute;
            bottom: 2rem;
            left: 0;
            right: 0;
            margin: auto;
            font-size: 0.8rem;
            color: ghostwhite;
            text-align: center;
        }

        .input-div {
            margin: 1rem 0;
            text-align: center;
        }

        .input-div label {
            width: 72px !important;
            text-align: right;
            display: inline-block;

        }
    </style>
</head>
<body>
<div id="form">
    <span style="letter-spacing: 1rem;text-indent: 1rem;">登录</span>
    <div style="width: 50%;">
        <div>
            <vs-input vs-label-placeholder="用户名" v-model="$v.userName.$model" :class="status($v.userName)"/>
        </div>
        <div>
            <vs-input type="password" vs-label-placeholder="密码" v-model="$v.psd.$model" :class="status($v.psd)"/>
        </div>
        <div style="display:flex; margin-bottom:1rem;">
            <span style="flex:1"><vs-input vs-label-placeholder="验证码" v-model="$v.verificationCode.$model"
                                           :class="status($v.verificationCode)"/></span>
            <img style="flex:1;margin-top:17px;margin-left: 10px;cursor: pointer" id="verificationCode_img"
                 onclick="refreshImg()">
        </div>
        <div>
            <vs-button vs-type="relief" @click="login" style="width:100%;border-radius: 20px;">登录</vs-button>
        </div>
    </div>
</div>

<canvas id="canvasbg" style="position:absolute;z-index:0;"></canvas>
<img src="img/logo_mo.png" style="position: absolute;top:5px;left:5px">
<div style="position: absolute;width:450px;height:477px;top:15vh;left: 13%;">
    <h1 style="text-align: center;
        color: white;
        z-index: 999;
        font-size: 2.5rem;letter-spacing: 3rem;
    text-indent: 3rem;">数字黔游</h1>
    <img src="img/cru.png" style="position:absolute;top:0">
</div>
<div align="center" style="color: #ffffff;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 1rem;">
    <span>Copyright 2018-2020 中国移动 版权所有</span>
    <img src="img/12377logo.png" onclick="window.open('http://www.12377.cn/node_552908.htm');"
         style="margin-left:1rem;width: 4rem;cursor: pointer">
</div>

<script src="js/vue.js"></script>
<script src="js/iview-3.1.3/iview.js"></script>
<script src="js/vuesax.umd.js"></script>
<script src="js/vuelidate.min.js"></script>
<script src="js/validators.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/mock.js"></script>
<script src="js/api.js"></script>
<script src="js/star/jquery.js"></script>
<script src="js/star/echarts.js"></script>
<script src="js/star/background.js"></script>

<script src="js/aes/aes.js"></script>
<script src="js/aes/pad-zeropadding-min.js"></script>
<script src="js/aes/encrypt.js"></script>

<script>
    Vue.use(window.vuelidate.default);
    const {required, minLength, maxLength} = window.validators;

    let vm = new Vue({
        el: '#form',
        data: {
            userName: '',
            psd: '',
            verificationCode: '',
        },
        validations: {
            userName: {
                required,
            },
            psd: {
                required,
            },
            verificationCode: {
                required,
                minLength: minLength(4),
                maxLength: maxLength(4)
            }
        },
        methods: {
            status(validation) {
                return {
                    error: validation.$error,
                    dirty: validation.$dirty
                }
            },
            login() {
                if (this.visible) return;
                this.$v.$touch();
                if (this.$v.$invalid) {
                    this.submitStatus = 'ERROR';
                } else {
                    let urlSearchParams = new URLSearchParams();
                    urlSearchParams.append('username', this.userName);
                    urlSearchParams.append('password', encrypt(this.psd));
                    urlSearchParams.append('code', this.verificationCode);

                    axios.post(POST_login, urlSearchParams).then(resp => {
                        if (resp.data.code == 200) {
                            sessionStorage.loginData = JSON.stringify(resp.data.data);
                            window.location = 'index.html';
                        } else {
                            refreshImg();
                            this.$Notice.info({
                                title: resp.data.msg
                            });
                        }
                    });
                }
            },
            changePWD() {
                vm_modal.visible = true;
            }
        }
    });

    refreshImg();
    document.onkeyup = event => {
        if (event.keyCode === 13) vm.login(event);
    };

    function getValidateCode() {
        return GET_validateCode + '?timestamp=' + new Date().valueOf();
    }

    function refreshImg() {
        document.querySelector("#verificationCode_img").setAttribute("src", getValidateCode());
    }
</script>
</body>
</html>